<template>
	<view class="friendsCircle-content-item" v-for="(v, i) in moment" :key="i">

		<view class="friendsCircle-content-right">


			<view class="group-item-left" @click="showMessage(v)">
				<head-image :name="v.creatorId == mine.id ? v.targetName : v.creator" :url="v.avatar"
					:size="130"></head-image>
				<view class="group-name">
					<view class="codhe">
						<view class="friendsCircle-content-nickName">{{ v.creator }}</view>

						<view class="chat-tag" v-if="v.creatorId !== mine.id">
							<!--  	  <uni-tag v-if="v.sex==0" class="iconfont icon-man-arrow" style="background: #10AEFF; border: #999" disabled
        	           :text="'&nbsp;' + v.age" size="mini" type="primary"></uni-tag>
        	  <uni-tag v-if="v.sex==1" class="iconfont icon-girl-arrow" style="background: #F76260; border: #999" disabled
        	           :text="'&nbsp;' + v.age" size="mini" type="primary"></uni-tag> -->

							<view class="cnams">
								<image v-show="v.sex==1" src="/static/dazi/man.png" mode=""></image>
								<image v-show="v.sex==0" src="/static/dazi/womn.png" mode=""></image>
							</view>

						</view>
					</view>
					
					<!-- 
		  时间
		   &nbsp;&nbsp;{{ getTimer(v.createTime) }}
		   -->


					<view v-if="v.creatorId == mine.id" class="friendsCircle-content-text">请求添加对方为好友</view>
					<view v-if="v.targetId == mine.id" class="friendsCircle-content-text">请求加为好友</view>

				</view>
				<span style="margin-left: auto; color: #837487;  letter-spacing: 1rpx; font-size: 26rpx">
					<view class="friendsCircle-content-tools" v-if="v.targetId == mine.id && v.status == 1">
						已同意
					</view>
					<view class="friendsCircle-content-tools" style="color: #F43D58"
						v-if="v.targetId == mine.id && v.status == 2">
						已拒绝
					</view>
					<view v-if="v.creatorId == mine.id" :class="statusClass(v.status)">
						{{ statusText(v.status) }}
					</view>
				</span>

				<view class="friendsCircle-content-tools" v-if="v.targetId == mine.id && v.status == 0">
					<button type="primary" class="junoeke" size="mini" @click.stop="onAdd(v, false)">拒绝
					</button>
					<button type="primary" class="junoeke2"
						size="mini" @click.stop="onAdd(v, true)">
						同意
					</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getTimer
	} from "../../common";
	import HeadImage from "../head-image/head-image.vue";
	import http from '../../common/request';

	export default {
		components: {
			HeadImage
		},
		// 朋友圈列表内容区
		data() {
			return {
				keyboardHeight: 0,
				msg: '',
				msgFocus: false,
				toggleMsgBox: false,
				showToolIndex: null,
				chooseUserIndex: null,
				type: 'msg',
				replydata: '',

				queryParams: {
					pendingId: null,
					operation: null
				}
			};
		},

		methods: {
			showMessage(apply) {
				const message = '【' + apply.creator + '】 请求添加 【' + apply.targetName + '】 为好友 \n' + '打招呼信息：' + apply
					.message + '\n 发起时间：' + getTimer(apply.createTime)


				uni.showModal({
					title: '详情',
					content: message,
					showCancel: false, // 只显示确定按钮
					confirmText: '确定', // 确定按钮的文本
					success: (res) => {}
				});
			},
			onAdd(v, agree) {
				http({
					url: '/friend/bind/' + v.creatorId + '?agree=' + agree,
					method: 'PUT',
				}).then((res) => {
					if (agree) {
						let user = res
						let friend = {
							id: user.id,
							nickName: user.nickName,
							headImage: user.headImage,
							online: user.online
						}
						this.friendStore.addFriend(friend);
						uni.showToast({
							title: "添加成功，对方已成为您的好友",
							icon: "none"
						})
						v.status = 1
					} else {
						uni.showToast({
							title: "已拒绝",
							icon: "none"
						})
						v.status = 2
					}

					//刷新待审批数量
					this.userStore.loadUserPendingCount()
				})
			},
			getTimer,
			statusClass(status) {
				switch (status) {
					case 0:
						return 'status-pending';
					case 1:
						return 'status-approved';
					case 2:
						return 'status-rejected';
					default:
						return '';
				}
			},
			statusText(status) {
				switch (status) {
					case 0:
						return '等待验证';
					case 1:
						return '已同意';
					case 2:
						return '被拒绝';
					default:
						return '';
				}
			}
		},


		props: {
			moment: {
				type: Array,
				default: []
			}
		},
		computed: {
			mine() {
				return this.userStore.userInfo;
			},
			avatarTextStyle() {
				return `width: ${this.size}rpx;height:${this.size}rpx;
				color:${this.textColor};font-size:${this.size * 0.6}rpx;`
			},
		},
		mounted() {
			// #ifdef APP-PLUS
			uni.onKeyboardHeightChange(res => {
				this.keyboardHeight = res.height
			})
			// #endif
		},
	};
</script>

<style scoped lang="scss">
	.junoeke {
		background: #2A222F;
		height: 64rpx;
		border-radius: 50rpx;
		color: #FFFFFF;
		font-size: 28rpx;
	}
	.junoeke2 {
		background: linear-gradient(106.37deg, #FB75D6 53.75%, #B270F0 95.32%);
margin-left: 20rpx;
		height: 64rpx;
		border-radius: 50rpx;
		color: #FFFFFF;
		font-size: 28rpx;
	}

	.cnams {
		image {
			margin-left: 10rpx;
			width: 32rpx;
			height: 32rpx;
		}
	}

	.codhe {
		display: flex;
		align-items: center;
	}

	.chat-tag {
		color: #999;
		font-size: 26rpx;
		margin-top: 10rpx;
		display: flex;
		align-items: center;
		margin-right: 5rpx;
	}

	.group-name {
		font-size: 28rpx;
		padding-left: 20rpx;
		text-align: left;
		white-space: nowrap;
		color: #3b4144;
		overflow: hidden;
	}

	.group-item-left {
		height: 100rpx;
		display: flex;
		margin-bottom: 1rpx;
		position: relative;
		align-items: center;
		white-space: nowrap;
	}

	.zfb-tk-send-tool {
		background: #f7f7f7;
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
	}

	.zfb-tk-send-tool-c {
		padding: 16rpx 12rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
		border: 1px #ddd solid;
		border-left: none;
		border-right: none;
	}

	.status-pending {
		margin-top: 10rpx;
		font-size: 28rpx;
		color: lightseagreen;
		/* 待对方同意 */
	}

	.status-approved {
		margin-top: 10rpx;
		font-size: 28rpx;
		// color: deepskyblue;
		/* 已同意 */
	}

	.status-rejected {
		margin-top: 10rpx;
		font-size: 28rpx;
		color: red;
		/* 被拒绝 */
	}

	.zfb-tk-send-tool-c .zfb-tk-send-tool-btn {
		transition: color 0.5s;
	}

	.zfb-tk-send-tool .zfb-tk-send-tool-input {
		padding: 0 24rpx;
		box-sizing: border-box !important;
		width: 100%;
		background: #fff;
	}

	.zfb-tk-send-tool-text {
		white-space: nowrap;
		padding: 10rpx 24rpx;
		border-radius: 12rpx;
		border: 1px #ddd solid;
		background: #f7f7f7;
		color: #ddd;
	}

	.friendsCircle-content-item {
		background-color: white;
		display: flex;
		flex-direction: row;
		padding: 40rpx 14rpx;
		// border-bottom: 1px #5F698C solid;
	}

	.friendsCircle-content-avatar {
		border-radius: 10rpx;
		width: 90rpx;
		height: 90rpx;
		min-width: 90rpx;
	}

	.friendsCircle-content-right {
		display: flex;
		flex-direction: column;
		padding-left: 18rpx;
		flex: 1;
		box-sizing: border-box;
	}

	.friendsCircle-content-nickName {
		// font-weight: bold;
		font-size: 32rpx;
		color: #2A222F;
	}

	.friendsCircle-content-text {
		margin-top: 10rpx;
		font-size: 24rpx;
		color: #837487;
	}

	.friendsCircle-content-imgs {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		flex: 1;
		margin-top: 24rpx;
	}

	.friendsCircle-content-img {
		max-width: 100%;
	}

	.friendsCircle-content-img.fci1 {
		height: 550rpx;
		max-width: 500rpx;
		margin-right: 5px;
	}

	.friendsCircle-content-img.fci2 {
		width: 185rpx;
		height: 185rpx;
		margin-right: 5rpx;
		margin-bottom: 5rpx;
	}

	.friendsCircle-content-img.fci2:nth-child(3n) {
		margin-right: 0;
	}

	.friendsCircle-content-img.fci3 {
		width: 185rpx;
		height: 185rpx;
		margin-right: 5rpx;
		margin-bottom: 5rpx;
	}

	.friendsCircle-content-img.fci3:nth-child(3n) {
		margin-right: 0;
	}

	.friendsCircle-content-img.fci4 {
		width: 185rpx;
		height: 185rpx;
		margin-right: 5rpx;
		margin-bottom: 5rpx;
	}

	.friendsCircle-content-img.fci4:nth-child(2n) {
		margin-right: 185rpx;
	}

	.friendsCircle-content-img.fci5 {
		width: 185rpx;
		height: 185rpx;
		margin-right: 5rpx;
		margin-bottom: 5rpx;
	}

	.friendsCircle-content-img.fci5:nth-child(3n) {
		margin-right: 0;
	}

	.friendsCircle-content-img.fci6 {
		width: 185rpx;
		height: 185rpx;
		margin-right: 5rpx;
		margin-bottom: 5rpx;
	}

	.friendsCircle-content-img.fci6:nth-child(3n) {
		margin-right: 0;
	}

	.friendsCircle-content-img.fci7 {
		width: 185rpx;
		height: 185rpx;
		margin-right: 5rpx;
		margin-bottom: 5rpx;
	}

	.friendsCircle-content-img.fci7:nth-child(3n) {
		margin-right: 0;
	}

	.friendsCircle-content-img.fci8 {
		width: 185rpx;
		height: 185rpx;
		margin-right: 5rpx;
		margin-bottom: 5rpx;
	}

	.friendsCircle-content-img.fci8:nth-child(3n) {
		margin-right: 0;
	}

	.friendsCircle-content-img.fci9 {
		width: 185rpx;
		height: 185rpx;
		margin-right: 5rpx;
		margin-bottom: 5rpx;
	}

	.friendsCircle-content-img.fci9:nth-child(3n) {
		margin-right: 0;
	}

	.friendsCircle-content-location {
		font-size: 24rpx;
		color: #5F698C;
		margin-top: 12rpx;
	}

	.friendsCircle-content-time {
		font-size: 24rpx;
		color: #666666;
		margin-right: auto;
	}

	.friendsCircle-content-tools {
		margin-top: 14rpx;
	}

	.friendsCircle-content-tool {
		padding: 4rpx 16rpx;
		border-radius: 10rpx;
		background-color: #F8F8FA;
		color: #63678C;
		display: flex;
		flex-direction: row;
		position: relative;
	}

	.tabon .friendsCircle-content-tool-absolute {
		display: block;
	}

	.friendsCircle-content-tool-absolute {
		position: absolute;
		right: 100%;
		top: 50%;
		transform: translateY(-50%);
		display: none;
	}

	.friendsCircle-popup {
		margin-right: 24rpx;
		border-radius: 12rpx;
		background-color: rgba(0, 0, 0, 0.7);
		height: 75rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 0 24rpx;
	}

	.friendsCircle-popup-item {
		color: #fff;
		padding: 0 25rpx;
		height: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.friendsCircle-popup-item:nth-child(1):active .friendsCircle-popup-icon {
		font-size: 56rpx;
	}

	.friendsCircle-popup-icon {
		font-size: 46rpx;
	}

	.friendsCircle-popup-text {
		white-space: nowrap;
	}

	.friendsCircle-like {
		border-radius: 8rpx;
		padding: 12rpx;
		background-color: #F7F7F7;
		display: flex;
		flex-direction: row;
		align-items: center;
		flex-wrap: wrap;
		margin-bottom: 1px;
	}

	.friendsCircle-like-icon,
	.friendsCircle-like-text,
	.friendsCircle-comment-text {
		color: #5F698C !important;
		font-size: 28rpx;
	}

	.friendsCircle-comment-feedback .friendsCircle-comment-text {
		margin: 0 6rpx;
	}

	.friendsCircle-comment-text::after {
		content: ":";
		color: #333;
	}

	.friendsCircle-like-text {
		margin-left: 4rpx;
		margin-right: 10rpx;
	}

	.friendsCircle-like-text::after {
		content: ",";
	}

	.friendsCircle-like-text:nth-last-child(1)::after {
		content: "";
	}

	.friendsCircle-comment {
		background-color: #F7F7F7;
		border-radius: 8rpx;
	}

	.friendsCircle-comment-item {
		line-height: 40rpx;
		font-size: 28rpx;
		padding: 12rpx;
		white-space: pre-wrap;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.friendsCircle-comment-feedback {
		display: inline-block;
	}

	.friendsCircle-content-video {
		width: auto;
		height: 550rpx;
		max-width: 400rpx;
		position: relative;
		margin-top: 24rpx;
	}

	.friendsCircle-content-video-img {
		width: 100%;
		height: 100%;
	}

	.friendsCircle-content-video-icon {
		z-index: 1;
		position: absolute;
		left: 50%;
		top: 50%;
		width: 80rpx !important;
		height: 80rpx !important;
		transform: translate(-50%, -50%);
	}

	.friendsCircle-comment-content {}

	.friendsCircle-comment-content text {
		word-break: break-all;
	}

	.zfb-tk-send-tool-input-box {
		overflow: auto;
		width: 100%;
		margin: 0 12rpx;
		min-height: 75rpx;
		background-color: #fff;
		border-radius: 24rpx;
		padding-top: 18rpx;
		max-height: 225rpx;
		box-sizing: border-box;
	}

	.avatar-text {
		background-color: #f2f2f2;
		border-radius: 10%;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1px solid #ccc;
	}
</style>